<!-- 绩效统计报表 -->
<template>
	<view>
		<newNavBar></newNavBar>

		<view>
			<view class="chartsItem" style="">
				<qiun-title-bar :color="mainColor" title="日工序报工统计" />
				<view class="charts-box">
					<qiun-data-charts type="pie" :opts="optsList.bggxOpts" :ontouch="true"
						:chartData="chartsData.totalPGGXChart" tooltipFormat="tooltipTotalBGGX"
						:errorMessage="totalPGGXErrorMessage" :errorReload="false" @getIndex="showOptsTooltip" />
				</view>
			</view>

			<view class="chartsItem" style="">
				<qiun-title-bar :color="mainColor" title="日班组完工统计" />
				<view class="charts-box" style="padding-left: 10px;padding-right: 10px;">
					<view v-if="showLoading" style=" width: 100%; position: relative; padding-bottom: 5px;">
						<loading style="margin: 0 auto;"></loading>
					</view>
					<view v-if="!showLoading" style="overflow: auto; max-height: 250px;">
						<data-progress :errorMessage="banzuErrorMessage" :cutNumber="9" :padMiddle="false"
							:progressList="dataList"></data-progress>
					</view>
				</view>
			</view>

			<view class="chartsItem" style="">
				<qiun-title-bar :color="mainColor" title="生产出入库统计" />
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="optsList.scfxOpts" :ontouch="true"
						:chartData="chartsData.totalProductChart" tooltipFormat="tooltipTotalCount"
						:errorMessage="totalProductErrorMessage" :errorReload="false" @getIndex="showOptsTooltip" />
				</view>
			</view>

			<!-- <view class="chartsItem" style="">
				<qiun-title-bar :color="mainColor" title="生产统计" />
				
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="optsList.scfxOpts" :chartData="chartsData.totalCountChart" />
				</view>
			</view> -->

		</view>

	</view>
	<!-- 底部导航栏信息 -->
	<newTabBar ref="tabBar" :tabList="tabList"></newTabBar>
</template>

<script>
	import * as SystemJs from '@/common/system.js'
	import * as configJs from '@/common/config.js'
	import * as defaultData from '@/common/defaultData.js'
	import loading from "../unit/loading2.vue"
	export default {
		components: {
			loading
		},
		data() {
			return {
				pageCode: '',
				pageType: '',
				mainColor: '',
				dataType: '',
				//查询数据信息
				queryData: {
					bgCode: '',
					gxCode: '',
					groupCode: '',
					date: '',
					userCode: '',
					userName: ''
				},
				baseRangeInfo: {
					gxRange: [],
					groupRange: []
				},
				current: 0,
				labelWidth: 80,
				rightIcon: '',
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				windowWidth: 0,
				StatusBar: 0,
				userInfo: {},
				transObj: {},
				badgeNumber: '0',
				baseTotalInfo: {
					totalWage: '0',
					hgpNum: '0',
					bhgpNum: '0'
				},
				showLoading: true,
				totalPGGXErrorMessage: '',
				totalProductErrorMessage: '',
				totalCountErrorMessage: '',
				banzuErrorMessage: '',
				chartsData: {
					totalPGGXChart: {
						series: []
					},
					totalProductChart: {
						categories: [],
						series: []
					},
					totalCountChart: {
						categories: [],
						series: []
					}
				},
				optsList: {
					bggxOpts: {
						enableScroll: false,
						extra: {
							pie: {
								labelWidth: 5,
								border: true,
								borderWidth: 1,
							}
						}
					},
					jxsyOpts: {
						enableScroll: true,
						xAxis: {
							scrollShow: false,
							rotateLabel: true,
							rotateAngle: 50,
							itemCount: 7,
							format: "xAxisDefaultDay"
						}
					},
					scfxOpts: {
						padding: [15, 15, 0, 5],
						enableScroll: true,
						xAxis: {
							scrollShow: false,
							rotateLabel: false,
							rotateAngle: 10,
							itemCount: 7,
							format: "xAxisDefaultDay"
						},
						extra: {
							column: {
								type: "stack",
								width: 30,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
								labelPosition: "center"
							}
						}
					}
				},
				dataList: [{
						name: '一号工艺',
						now: '10',
						expect: '100',
						value: '10'
					},
					{
						name: '二号工艺',
						now: '50',
						expect: '100',
						value: '30'
					},
					{
						name: '三号工艺',
						now: '50',
						expect: '100',
						value: '50'
					},
					{
						name: '四号工艺',
						now: '50',
						expect: '100',
						value: '70'
					},
					{
						name: '五号工艺',
						now: '50',
						expect: '100',
						value: '90'
					}
				]
			}
		},
		onLoad(res) {
			this.pageCode = res.pageCode;
			this.dataType = res.dataType;
			//获取传输的对象
			if (res.obj && !SystemJs.systemJs.IsEmpty(res.obj)) {
				this.transObj = JSON.parse(res.obj);
			}
			var s = SystemJs.systemJs.getDate(-22);
			console.log(s)
			SystemJs.systemJs.showTitleBar("数据统计", false)
			this.tabList = configJs.configData.tabList;
			this.mainColor = configJs.baseColor.mainTitleColor;
			this.rightIcon = 'icon-shaixuan';
			this.userInfo = configJs.getBaseInfo.getUserInfo();
			this.money = SystemJs.unitJs.moneyFormat('99633', 0);
			setTimeout(() => {
				this.chartsData.totalCountChart = defaultData.columnData
			}, 600)

			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth * 0.7;
					this.y = res.windowHeight * 0.8
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					this.StatusBar = statusBar
					console.log('heightShow', this.swiperHeight)
				}
			})
			this.getTabTaskNum();
			this.loadData();
			this.loadBanZuData();
			this.loadProductData();

			// this.getCommRangeInfo();
		},
		methods: {
			//获取任务中心未处理任务数量
			async getTabTaskNum() {
				var num = await configJs.getBaseInfo.getNTaskConfirmNum({
					userCode: configJs.getBaseInfo.getUserInfo().userCode
				})
				var getNum = uni.getStorageSync("ntaskConfirmNum")
				if (getNum == undefined || getNum == "" || getNum != num) {
					uni.removeStorageSync("ntaskConfirmNum")
					uni.setStorageSync("ntaskConfirmNum", num)
					//刷新子组件页面数据
					this.$refs.tabBar.reLoad();
				}
			},
			async getCommRangeInfo() {
				//获取工序数据信息
				this.baseRangeInfo.gxRange = await configJs.getBaseInfo.getGXInfo();
				// this.baseFormData.gxCode = SystemJs.systemJs.selectDefaultRage(this.baseRangeInfo.gxRange, [])
			},
			showOptsTooltip(e) {
				console.log("获取点击索引事件", e);
				//先拿到点击索引，您可以根据索引拼接一下textList
				let currentIndex = e.currentIndex.index;
				console.log("获取点击索引事件", currentIndex);
				if (currentIndex > -1) {
					// let textList = [{
					// 		text: "我是一个自定义标题" + this.chartsData.categories[currentIndex],
					// 		color: null
					// 	},
					// 	{
					// 		text: '类别1：' + this.chartsData.series[0].data[currentIndex],
					// 		color: '#2fc25b'
					// 	},
					// 	{
					// 		text: '类别2：' + this.chartsData.series[1].data[currentIndex],
					// 		color: '#facc14'
					// 	}
					// ];
					// console.log("获取点击索引事件", JSON.stringify(textList));
					this.$nextTick(() => {

						// this.optsList.jxsyOpts={

						// 	// extra:{
						//      tooltip:{
						//        index:currentIndex,
						//        // offset:{
						//        //   x:e.opts.chartData.xAxisPoints[currentIndex]+e.opts.chartData.xAxisData.eachSpacing/2,//这里的x坐标为了与x轴categories中的点位对齐，我调用的opts中的参数
						//        //   y:e.event.y,//y坐标，用的是点击的点位的y值
						//        // },
						//        textList:textList
						//      // }
						//   },
						//      // update:true
						//    }
					})
				}
			},
			/**
			 * 当日工序报工数据报表
			 */
			loadData() {
				this.chartsData.totalPGGXChart.series = [];
				var obj = {};
				obj = SystemJs.systemJs.copyObject(this.queryData)
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.mobType = "H5";
				obj.pageIndex = this.page;
				obj.dataType = this.dataType;
				var loginUserCode = '';
				if (this.userInfo.userCode) {
					loginUserCode = this.userInfo.userCode;
				}
				obj.loginUserCode = loginUserCode;
				SystemJs.httpUnit.requestCryptoPost({
					url: 'App/GetPaiGongGXReport',
					data: obj
				}).then((res) => {
					if (res.Result) {
						var data = res.Data;
						//工序报工统计表
						if (data) {
							Object.assign(this.chartsData.totalPGGXChart, data);
						} else {
							this.$nextTick(() => {
								//每次提示信息要不同否则无法触发字段数据变化事件
								this.totalPGGXErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
							})
						}
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
						this.$nextTick(() => {
							this.totalPGGXErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
							//每次提示信息要不同否则无法触发字段数据变化事件
							this.totalCountErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
						})
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
					this.$nextTick(() => {
						this.totalPGGXErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
						//每次提示信息要不同否则无法触发字段数据变化事件
						this.totalCountErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
					})
				})
			},
			/**
			 * 获取班组生产进度统计表
			 */
			loadBanZuData() {
				this.dataList = [];
				var obj = {};
				obj = SystemJs.systemJs.copyObject(this.queryData)
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.mobType = "H5";
				obj.pageIndex = this.page;
				obj.dataType = this.dataType;
				var loginUserCode = '';
				if (this.userInfo.userCode) {
					loginUserCode = this.userInfo.userCode;
				}
				obj.loginUserCode = loginUserCode;
				SystemJs.httpUnit.requestCryptoPost({
					url: 'App/GetPaiGongBanZuReport',
					data: obj
				}).then((res) => {
					this.showLoading = false;
					if (res.Result) {
						var data = res.Data;
						if (data) {
							this.dataList = data;
						} else {
							this.$nextTick(() => {
								//每次提示信息要不同否则无法触发字段数据变化事件
								this.banzuErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
							})
						}
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
						this.$nextTick(() => {
							//每次提示信息要不同否则无法触发字段数据变化事件
							this.banzuErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
						})
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
					this.$nextTick(() => {
						//每次提示信息要不同否则无法触发字段数据变化事件
						this.banzuErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
					})
				})
			},
			/**
			 * 获取生产出入库数量统计表
			 */
			loadProductData() {
				this.chartsData.totalProductChart.categories = [];
				this.chartsData.totalProductChart.series = [];
				var obj = {};
				obj = SystemJs.systemJs.copyObject(this.queryData)
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.mobType = "H5";
				obj.pageIndex = this.page;
				obj.dataType = this.dataType;
				var loginUserCode = '';
				if (this.userInfo.userCode) {
					loginUserCode = this.userInfo.userCode;
				}
				obj.loginUserCode = loginUserCode;
				SystemJs.httpUnit.requestCryptoPost({
					url: 'App/GetProductInOutStockReport',
					data: obj
				}).then((res) => {
					if (res.Result) {
						var data = res.Data;
						//工序报工统计表
						if (data) {
							Object.assign(this.chartsData.totalProductChart, data);
						} else {
							this.$nextTick(() => {
								//每次提示信息要不同否则无法触发字段数据变化事件
								this.totalProductErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
							})
						}
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
						this.$nextTick(() => {
							//每次提示信息要不同否则无法触发字段数据变化事件
							this.totalProductErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
						})
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
					this.$nextTick(() => {
						//每次提示信息要不同否则无法触发字段数据变化事件
						this.totalProductErrorMessage = "无数据" + Math.floor(Math.random() * 1000);
					})
				})
			},

			closeDrawer() {
				this.closeRefs('showRight')
			},
			///状态栏右侧图标点击事件
			filterOpen() {
				this.openRefs('showRight')
			},
			//打开控件窗体
			openRefs(e) {
				this.$nextTick(() => {
					this.$refs[e].open()
				})
			},
			//关闭控件窗体
			closeRefs(e) {
				this.$refs[e].close()
			},
			//重置事件
			reset() {
				SystemJs.unitJs.clearObject(this.queryData);
			},
			//查询事件
			query() {
				this.loadData();
				console.log('baseForm', this.queryData)
				this.closeRefs('showRight')
			}
		}
	}
</script>

<style scoped>
	.uCard {
		margin: 5px;
		padding: 5px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px #e6e6e6 solid;
		border-radius: 7px;
	}

	.chartsItem {
		margin: 10px;
		border-radius: 10px;
		background-color: #fff;
	}

	.content {
		padding: 15px;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	/* 修改form表单列样式 缩小间距*/
	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>